<template>
  <div>
    <div :class="[$style.search_box, $style.topSelect]">
      <div :class="$style.selectBox">
          <label>运营商:</label>
          <el-select
          style="width:160px"
          v-model="api"
          clearable
          @change="handleChange"
          placeholder="请选择"
          >
          <el-option v-for="item in company" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
      </div>
       <div :class="$style.selectBox">
        <label>按运营商分组：</label>
        <el-select
          style="width:160px"
          v-model="apiType"
          @change="handleChangeApi"
          placeholder="是"
        >
          <el-option label="是" :value="true"></el-option>
          <el-option label="否" :value="false"></el-option>
        </el-select>
      </div>
      <div :class="$style.selectBox">
        <label>时间筛选类型：</label>
        <el-select
          style="width:160px"
          v-model="timeType"
          @change="changeSearch"
          placeholder="请选择"
        >
        <!-- <el-option label="请选择" value=""></el-option> -->
          <el-option label="年" value="year"></el-option>
          <el-option label="月" value="month"></el-option>
          <el-option label="日" value="date"></el-option>
        </el-select>
      </div>
       
       
       <div :class="$style.selectBox" style="margin-right:20px;display: flex;align-items: center;">
        <label>创建时间：</label>
        <el-date-picker
          v-model="appointmentTime"
          type="daterange"
          @change="getRate"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="timestamp"
          :picker-options="pickerOptions"
          style="height:40px"
        ></el-date-picker>
      </div>
      <div :class="$style.searchBox1" style="margin-left: 20px">
        <el-button type="primary" icon="el-icon-search" @click="getRate">查询</el-button>        
      </div>
    </div>
    <Panel title="财务统计">
    <TableEncapsulation
      slot="body"
      :tableConfig="tableConfig"
      :tableData="tableData"
    >
    <template slot="operation" slot-scope="operation">
          <el-button
            type="text"
            @click="()=>commentDetail(operation.row.oid)"
          >查看</el-button>
        </template>
        <TablePager
          slot="pager"
          v-if="pager.use"
          :size="pager.size"
          :pageChange="pageChange"
          :show-total="pager.showTotal"
          :total="pager.total"
          :current="pager.current"
        >
          <span class="demonstration">GO></span>
        </TablePager>
    </TableEncapsulation>
    </Panel>
    
  </div>
</template>
<script>
import request from "@/tools/request";
import Panel from "@/components/Panel";
import TableEncapsulation from "@/components/TableEncapsulation";
import TablePager from "@/components/Pager";
import SearchInput from "@/components/SearchInput";
import { objectFilter } from "@/tools/array";
import { dateFormat } from "@/tools/time";
export default {
  name: "financeAmount",
  components: {
    TableEncapsulation,
    TablePager,
    Panel,
    SearchInput
  },
  data() {
    return {
      tableData: [],
      company:[],
      timeType:'date',
      operation: true,
      apiType:true,
      tagType:"",
      pager: {
        use: true,
        total: 0,
        current: 1,
        size: 10,
        showTotal: true
      },
      // groups:["date","api"],
      api:"",
      phone: '',
      plate: '',
      wxSn: '',
      settlement: '',
      appointmentTime: [new Date().getTime() - 3600 *1000*24, new Date().getTime()],
      pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        genare: [
            {
            label: "日期",
            type: "text",
            prop: "dateTime",
            align: "center"
            },
            {
            label: "运营商",
            type: "text",
            prop: "apiName",
            align: "center"
            },
            {
            label: "充电电量",
            type: "text",
            prop: "electricity",
            align: "center"
            },
            {
            label: "电费",
            type: "text",
            prop: "powerPrice",
            align: "center"
            },
            {
            label: "服务费",
            type: "text",
            prop: "servicePrice",
            align: "center"
            },
            {
            label: "充电量",
            type: "text",
            prop: "electricity",
            align: "center",
            },
            {
            label: "余额",
            type: "text",
            prop: "balance",
            align: "center",
            },
            {
            label: "充值金额",
            type: "text",
            prop: "chargePrice",
            align: "center",
            },
            {
            label: "收入",
            type: "text",
            prop: "income",
            align: "center"
            },
            {
            label: "营销收入",
            type: "text",
            prop: "marketing",
            align: "center"
            },
            {
            label: "支出",
            type: "text",
            prop: "disburse",
            align: "center"
            },
            {
            label: "附加费收入",
            type: "text",
            prop: "surcharge",
            align: "center"
            },
        ]
    };
  },
  created() {
    this.getRate();
    this.companyTh()
  },
  computed: {
    tableConfig () {
      return {
        selection: true,
        columnConfig: this.genare.filter(Boolean)
        }
    },
    groups () {
      let groups = []
      if(this.apiType){
        groups.push('api')
      }
      if(this.timeType == 'year'){
       groups.push('year') 
      }
      if(this.timeType == 'month'){
       groups.push('month') 
      }
      if(this.timeType == 'date'){
       groups.push('date') 
      }
      if(this.tagType){
        groups.push(this.tagType)
      }
         return  groups
    }
  },
  methods: {
    async getRate() {
      let end = this.appointmentTime ? (dateFormat(this.appointmentTime[1], "yyyy-MM-dd")) : undefined
      let begin = this.appointmentTime ? (dateFormat(this.appointmentTime[0],"yyyy-MM-dd")) : undefined
      let groups =  this.groups
      let api =  this.api
      let search = objectFilter({begin, end, groups, api })
      const res = await request({
        url: "/finance/count/states",
        method: "POST",
        data: search
      });
      res.counts.map(item => {
        if(item.year){
          item.dateTime = item.year
        }
        if(item.month){
          item.dateTime = item.month
        }
        if(item.date){
          item.dateTime = item.date
        }
        return item
      })
      this.tableData = res.counts
    },
    pageChange(val) {
      this.pager.current = val;
      this.getRate();
    },
    changeSearch(key, val) {
     this.getRate();
    },
     handleChange(value) {
      // this.regionId = value[value.length-1]
      this.getRate();
    },
    handleChangeApi(value){
      // this.setGroups()
      this.getRate()
    },
    setGroups(){
      let groups = []
      if(this.apiType){
        groups.push('api')
      }
      if(this.timeType == 'day'){
        groups.push('date')
      }
      if(this.timeType == 'month'){
        groups.push('month')
      }
      if(this.timeType == 'year'){
        groups.push('year')
      }
      this.groups = groups
    },
    changeSearchTag(key, val) {
      this[key] = val;
      if(this.api){
          this.groups = [this.api, this.timeType];
      }
      let arr = new Set(this.groups)
      arr.add()
      if(this.gunId){

      }
    },

    //第三方公司
    async companyTh(){
      let { list } = await request({
      url: "/third/company/select",
      method: "POST",
      data: {}
      });
      let my = {id: 0, name: '自营'}
      this.company = [my, ...list]
    },
  }
}
</script>
<style lang='scss' module>
.examine{
    display: flex;
    align-items: center;
    :global{
        div{
            color: #fff;
            padding: 10px;
            margin: 0 10px;
            border-radius: 2px;
            font-size: 14px;
            cursor: pointer;
            min-width: 60px;
            text-align: center;
        }
        .adopt{
                background: #409EFF;
        }
    }
}
.search_box {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  :global {
    .el-input {
      width: 150px;
    }
    .el-select {
      .el-input {
        width: 90px;
      }
    }
    .el-input__icon {
      line-height: 27px;
    }
    .el-range-separator{
      line-height: 26px;
    }
  }
}

.topSelect {
  background-color: white;
  border-radius: 4px;
  padding: 20px;
  margin-bottom: 20px;
}
</style>